import React, { Component } from 'react';
import {
    SelectHeadTop,
    AppViewWrapper,
    ContainerAppView,
    LeftSideNavigation,
    ListnavbarUl,
    RightSideProduction,
    RightSideProductionUl
    // CategorynameLi,
    // RouterContainer

} from 'pages/select/StyleComponent'

import {
    // Route,
    Link
} from 'react-router-dom'

import Scroll from 'react-bscroll'
import 'react-bscroll/lib/react-scroll.css'
import AppTabbar from 'components/common/AppTabbar'
// import SearchPage from 'components/common/search/SearchPage'
import getSelect from 'utils/getSelect'


const LeftItem = (props)=>{
    // console.log(props)
    return (
        <li className="category_name">
        <a>
        {/* // onClick={} 
        // className={props.active?"active":""}> */}
        <span>{props.name}</span>
        </a>
        </li>
    )


    // NavItemChange(props.active){
    //     if(props.active === true){
    //       this.setState({
    //         pos: true
    //       })
    //     }else{
    //       this.setState({
    //         pos: false
    //       })
    //     }
    //   }
}

// 1.class item;
// 2.父级 state  id 1 
// 3.父级 事件 id changeId(n)
// 4.子级 传递函数
// 3.子级 click 执行父级传来的事件 （id）


// console.log(this.state)


class ProductItem extends Component{
   
    // if(){
    //     const  itemsLenthOne = props.body.items
    // }
    // console.log("props",props.body.items)

    render(){
        console.log(this.props)

        return(
            <div >
                {/* <img src={ props.body.items.length===1 || props.body.items[0].img_url}/> */}
                {/* <img/>
                <p> {props.body.category_name}</p>
                <div>
                 yayayy 
                </div> */}
    
                {this.renderList(this.props)}
                
            </div>
        )
    }
   
    titleImg = {
        width:"100%" ,
        height:"1.04rem"
    
   }

   categorylist = {
       width:"100%",
       textAlign:"center",
       fontWeight: "400"

       
   }

    renderList(props){
        

        if(props.view_type === 'cells_auto_fill' &&  props.body.items[0].img_url){

            return( <img src = {props.body.items[0].img_url} className="titleImg" style = {this.titleImg}/>)
        }else if(props.view_type === 'category_title'){
            return (<div className= "category_name" style= {this.categorylist}> --{props.body.category_name}-- </div>)
        }else {
            
            let array = props.body.items.map((value,key) =>{
                return( 
                <div>
                    <img src = {value.img_url}  style = {{width:"0.52rem" , height:"0.52rem"}}/>
                    <p>{value.product_name}</p>
                </div>
               
                
                )
              
            })
            return <div style = {{display:'flex',flexWrap:'wrap',flex:1}}>
                {array}
            </div>

        }
    }
}

class Select extends Component {

constructor(props){
    super(props)
    this.state={
        leftItemList:[],
        pos:false
    }
}

componentWillMount(){
    fetch("/data/item.json")
    .then(res=>res.json())
    .then(result=>{
        this.setState({
            leftItemList:result.data
        })
       
    })
    .catch(err=>console.log(err))

    //使用容器组件包裹UI组件  然后调用了actonCreator 里的函数 可以拿到数据
    this.props.getselectRightbox()

}

renderItem(){
    // console.log(this.state.pos)
    if(this.state.leftItemList.length){
        return this.state.leftItemList.map((item)=>{
            return <LeftItem key = {item.category_id} name={item.category_name} active = {this.state.pos} onClick={()=>console.log(1)} ></LeftItem>
            // console.log(item)
        })
    }
}

// changeLink(){
//     window.location.reload()
// }

//componentDidUpdate 选择这个钩子去打印从redux拿到的数据  然后慢慢调试
componentDidUpdate(){
    // this.props.select.map((item)=>{
    //     return item.category_id})
    console.log(this.props.select)
    
}

renderProductItem(){
  return this.props.select && this.props.select.data.map((item,index)=>{
    // console.log(item)

      return item.category_list.map((value,key) =>{
          console.log(value.body)
        //   return value.body.map((val,ind)=>{
            // if(value.items){
            //     console.log("优质")
            // }
            return < ProductItem key ={key}  {...value}></ProductItem >
        //   })
         
      })
  })
}

    render() {
        // console.log(this.state)
        // let {pos} = this.state
        return (
         <div>

         <SelectHeadTop>
             <Link to='/home' className= "back-icon-outer">
                <i className="back-icon"></i>
             </Link>
             
             <div className="classification">分类</div>

             <Link className="search-icon-outer" to="/search" >
                <i className="search-icon" ></i>
             </Link>
             {/* <Route  exact path="/select/search" component = {SearchPage}></Route> */}
         </SelectHeadTop>
        
            <AppViewWrapper>
                <ContainerAppView>
                    
                    <Scroll className="scroll">
                        <LeftSideNavigation>
                            <ListnavbarUl>
                                {this.renderItem()}
                            </ListnavbarUl>
                        </LeftSideNavigation>
                  

                        <RightSideProduction>
                            <RightSideProductionUl>
                                {this.renderProductItem()}
                            </RightSideProductionUl>
                        </RightSideProduction>
                
                    </Scroll>

                 
                </ContainerAppView>
            </AppViewWrapper>

            {/* <RouterContainer> */}

                {/* children = { () => <CategoryContent pos = {pos} */}
           
            {/* </RouterContainer> */}
            <AppTabbar {...this.props}></AppTabbar>
        
    </div>
        )
    }
}

// export default Select;
export default getSelect(Select)